<template>
  <div class="back">
    <div class="bg-blur"></div>
    <div class="login">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <div class="form-head">

          <h1 class="text-title"><i class="el-icon-upload , icon" style="margin-right: 10px;"></i>cloud-storage</h1>
        </div>
        <div class="form-centre">
          <el-form-item label="用户名：" prop="userName">
            <el-input type="text" v-model="ruleForm.userName" autocomplete="off" placeholder="请输入用户名或邮箱"></el-input>
          </el-form-item>
          <el-form-item label="密码：" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off" show-password
              placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="身份：">
            <el-radio v-model="ruleForm.role" label="1"><i class="el-icon-user-solid"
                style="margin-right: 10px;"></i>用户</el-radio>
            <el-radio v-model="ruleForm.role" label="0"><i class="el-icon-s-custom"
                style="margin-right: 10px;"></i>管理员</el-radio>
          </el-form-item>
          <el-form-item>
            <el-button round class="login-btn" type="primary" @click="submitForm(ruleForm)">登录</el-button>
          </el-form-item>
        </div>
        <div class="form-bottom">
          <a href="/register">用户注册</a>
          <a href="/resetPwd">忘记密码</a>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
  import router from "@/router";
  import apiUrl from "@/api/url.js";
  import link from "@/api/Link.js";
  export default {
    name: "login",
    data () {
      var validateUserName = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入用户名"));
        } else {
          callback();
        }
      };
      var validatePassword = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          callback();
        }
      };
      return {
        ruleForm: {
          userName: "",
          password: "",
          role: "1"
        },
        rules: {
          userName: [{ validator: validateUserName, trigger: "blur" }],
          password: [{ validator: validatePassword, trigger: "blur" }],
        },
      };
    },
    methods: {
      submitForm (ruleForm) {
        let data = {
          userName: ruleForm.userName,
          password: ruleForm.password,
          role: ruleForm.role,
        };
        link(apiUrl.baseUrl + "/sys/user/login/v1", "POST", JSON.stringify(data)).then((ok) => {
          if (ok.data.code === 0) {
            this.$message({
              message: "登录成功",
              type: "success",
            });
            localStorage.setItem("token", ok.data.data.token);
            localStorage.setItem("user", JSON.stringify(ok.data.data.userVO));

            if (ok.data.data.userVO.role == 1) {
              router.push("/home");
            } else {
              router.push("/adminHome");
            }
          } else {
            this.$message.error(ok.data.msg);
          }
        });
      },
    },
  };
</script>

<style scoped>
  .login {
    display: flex;
    justify-content: center;
    align-content: center;
    padding-top: 100px;

  }

  .demo-ruleForm {
    background-color: white;
    width: 300px;
    padding: 50px;
    /* margin-right: 500px; */
    border: 1px solid black;
    border-radius: 8%;
    /*设置透明度，0为完全透明，1为不透明*/
    opacity: 0.8;
  }

  .text-title {
    text-align: center;
    font-family: serif;
    font-style: normal;
  }

  .back {
    height: 100%;
    width: 100%;
  }

  .bg-blur {
    height: 100%;
    width: 100%;
    /*渐变的背景色*/
    /*height: 100vh;
  background-image: linear-gradient(to bottom right, #FC466B, #3F5EF8);
  overflow: hidden;*/
    /*背景图*/
    background: url("../../assets/beijing.jpeg");
    position: fixed;
    background-size: 100% 100%;
    z-index: -1;
    /* filter: blur(1px); */
  }

  .login-btn {
    width: 100%;
    /* border-radius: 10%; */
  }

  .form-bottom {
    display: flex;
    justify-content: space-between;
  }
</style>